<template>
	<view :style="[AppSkinVar]">
		<order-header :info="headerInfo"></order-header>
		<view class="exp-tlt" v-if="express">
			<view class="e-flex">
				<text class="c-primary">{{ $t('order.物流公司') }}：{{ express?.expName }}</text>
				<view class="copy-1 e-font-22" v-if="expressWebsite" @tap="handleWebSite">
					{{ $t('order.官网地址') }}
				</view>
			</view>
			<view class="e-m-t-10 e-flex">
				<text class="e-font-26 c-secondary">{{ $t('order.物流单号') }}：{{ express?.number }}</text>
				<view class="copy e-font-22" v-if="express.number" @tap="$copy(express.number)">
					{{ $t('order.copy') }}
				</view>
			</view>
		</view>
		<view class="info" v-if="express">
			<view class="info-tlt">
				{{ $t('order.物流跟踪') }}
			</view>
			<view class="info-list" v-if="express.list.length > 0">
				<view class="item" :class="{ 'c-primary': index == 0, 'c-999': index !== 0 }" v-for="(item, index) in express.list" :key="index">
					<view class="context">
						{{ item.status }}
					</view>
					<view>
						{{ item.time }}
					</view>
				</view>
			</view>
			<empty v-else :text="$t('order.无跟踪物流')" paddingTop="100rpx" :icon="$staticPath('default_img.png')" :show="true"></empty>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import orderHeader from './child/order-header.vue';
import { useCurrentInstance, usePromise } from '@/common/hooks';
import { getExpressByOrder } from '@/common/request/api';
import { onLoad } from '@dcloudio/uni-app';

const props = defineProps({
	orderCode: String
});

const ctx = useCurrentInstance();

const expressWebsite = ref('');
const [getExpress, express] = usePromise(async () => {
	const res = await getExpressByOrder(props.orderCode!);
	expressWebsite.value = res.data.expressWebsite;
	return res.data?.travel;
});
const headerInfo = {
	title: '订单正在向你飞奔',
	icon: '3'
};

const handleWebSite = () => {
	// #ifdef H5
	top!.location.href = expressWebsite.value;
	// #endif
	// #ifndef H5
	ctx.$copy(expressWebsite.value);
	// #endiff
};

onLoad(() => {
	getExpress();
});
</script>

<style lang="scss" scoped>
.exp-tlt {
	padding: 32rpx 20rpx;
	margin-bottom: 30rpx;
	.copy {
		width: 68rpx;
		height: 40rpx;
		border-radius: 8rpx;
		border: 2rpx solid #333333;
		line-height: 38rpx;
		text-align: center;
		margin-left: 14rpx;
	}

	.copy-1 {
		border-radius: 8rpx;
		border: 2rpx solid #333333;
		line-height: 38rpx;
		text-align: center;
		margin-left: 14rpx;
		padding: 0 6rpx;
	}
}

.info {
	margin-top: 20rpx;
	.info-tlt {
		padding: 34rpx 20rpx;
	}
	.info-list {
		padding: 30rpx 40rpx;
		.item {
			position: relative;
			min-height: 128rpx;
			padding: 0 32rpx;
			padding-bottom: 32rpx;
			.context {
				margin-bottom: 12rpx;
			}
			&::after {
				content: '';
				position: absolute;
				top: 8rpx;
				left: -7rpx;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: #ccc;
			}
			&::before {
				content: '';
				position: absolute;
				top: 14rpx;
				left: 0;
				height: 100%;
				width: 2rpx;
				background-color: #ccc;
			}
			&:first-child {
				.context {
					// color: $redColor;
				}
				&::after {
					top: 4rpx;
					width: 24rpx;
					height: 24rpx;
					left: -12rpx;
					// background-color: $redColor;
				}
				&::after {
					background-color: var(--color-primary);
				}
			}
			&:last-child {
				&::before {
					width: 0;
				}
			}
		}
	}
}

.exp-tlt,
.info {
	background-color: #fff;
}
</style>
